<div class='dashboard-banner-container' data-page="chain-details">
  <div class="container">
    <div class="dashboard-banner">
      <!-- Graph and legend -->
      <div class="dashboard-banner-network-graph">
        <!-- Graph -->
        <div class="dashboard-banner-chart">
          <button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
            <span><%= gettext("There was a problem loading the chart.") %></span>
          </button>
          <canvas data-chart="historyChart"
                  data-history_chart_paths=
                  '{<%= for {{key, value}, x} <- Enum.with_index(@chart_data_paths) do %>
                        "<%= key %>":"<%= value %>"
                        <%= if x<(map_size(@chart_data_paths)-1) do %>
                        ,
                        <% end %>
                  <% end %>}'
                  data-history_chart_config = '<%= @chart_config_json %>'
                  width="350" height="152">
          </canvas>
        </div>
        <!-- Legend -->
        <script>
         numChartData = <%= Enum.reduce(@chart_config, 0, fn (source, acc) ->
                        acc + length(elem(source, 1)) end) %>
         document.documentElement.style.setProperty("--numChartData", numChartData);
        </script>
        <div class="dashboard-banner-chart-legend">
          <% price_chart_legend_enabled? = Application.get_env(:block_scout_web, :chart)[:price_chart_legend_enabled?] %>
          <%= if Map.has_key?(@chart_config, :market) || price_chart_legend_enabled? do %>

            <%# THE FOLLOWING LINE PREVENTS COPY/PASTE ERRORS %>
            <%# Explicitly put @chart_config.market in a variable %>
            <%# This is done so that when people add a new chart source, x, %>
            <%# They wont just access @chart_config.x w/o first checking if x exists %>
            <% market_chart_config = Map.has_key?(@chart_config, :market) && @chart_config.market%>

            <%= if price_chart_legend_enabled? || Enum.member?(market_chart_config, :price) do %>
              <div class="dashboard-banner-chart-legend-item price-per-day">
                  <span class="dashboard-banner-chart-legend-label">
                  <%= Explorer.coin_name() %> <%= gettext "Price" %>
                  </span>
                  <div class="dashboard-banner-chart-legend-value-container">
                    <span class="dashboard-banner-chart-legend-value inline" data-selector="exchange-rate" data-wei-value="<%= Explorer.Chain.Wei.from(Decimal.new(1), :ether).value %>" data-usd-exchange-rate="<%= @exchange_rate.usd_value %>">
                    </span>
                </div>
              </div>
            <% end %>
            <%= if price_chart_legend_enabled? || Enum.member?(@chart_config.market, :market_cap) do %>
            <div class="dashboard-banner-chart-legend-item market-cap-per-day">
                <span class="dashboard-banner-chart-legend-label">
                <%= gettext "Market Cap" %>
                </span>
                <div class="d-flex" style="height: 20px; line-height: 20px;">
                  <% total_market_cap = market_cap(@market_cap_calculation, @exchange_rate) %>
                  <span style="display: contents;" class="dashboard-banner-chart-legend-value" data-selector="market-cap" data-usd-value="<%= total_market_cap %>">
                  </span>
                </div>
            </div>
            <% end %>
          <% end %>
          <%= render BlockScoutWeb.ChainView, "gas_price_oracle_legend_item.html", gas_price: @gas_price %>
          <%= if Map.has_key?(@chart_config, :transactions) do %>

            <% transaction_chart_config = @chart_config.transactions%>
            <%= if Enum.member?(transaction_chart_config, :transactions_per_day) do %>
            <div class="dashboard-banner-chart-legend-item tx-per-day">
                <span class="dashboard-banner-chart-legend-label">
                    <%= gettext "Daily Transactions" %>
                </span>
                <span class="dashboard-banner-chart-legend-value" data-selector="tx_per_day">
                    <% num_of_transactions = BlockScoutWeb.Cldr.Number.to_string!(Enum.at(@transaction_stats, 0).number_of_transactions, format: "#,###") %>
                    <%= num_of_transactions %>
                    <% gas_used = Enum.at(@transaction_stats, 0).gas_used %>
                    <%= if gas_used && gas_used > 0 do %>
                      <span
                        data-toggle="tooltip"
                        data-placement="top"
                        data-html="true"
                        data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-usage' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
                        title="<div class='custom-tooltip-header'>Gas used</div><div class='custom-tooltip-description'><b><%= BlockScoutWeb.Cldr.Number.to_string!(gas_used, format: "#,###") %><b></div>">
                        <i style="color: #ffffff;" class="fa fa-info-circle ml-1"></i>
                      </span>
                    <% end %>
                </span>
            </div>
            <% end %>
          <% end %>
        </div>
      </div>
      <!-- Stats -->
      <div class="dashboard-banner-network-plain-container">
        <div class="dashboard-banner-network-stats">
          <%= unless Application.get_env(:explorer, :chain_type) == :optimism do %>
            <%= case @average_block_time do %>
              <% {:error, :disabled} -> %>
                <%= nil %>
              <% average_block_time -> %>
                <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-1">
                  <span class="dashboard-banner-network-stats-label">
                    <%= gettext "Average block time" %>
                  </span>
                  <span class="dashboard-banner-network-stats-value" data-selector="average-block-time">
                    <%= Timex.format_duration(average_block_time, Explorer.Counters.AverageBlockTimeDurationFormat) %>
                  </span>
                </div>
            <% end %>
          <% end %>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-2">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Total transactions" %>
            </span>
            <div class="d-flex">
              <span class="dashboard-banner-network-stats-value" data-selector="transaction-count">
                <%= BlockScoutWeb.Cldr.Number.to_string!(@transaction_estimated_count, format: "#,###") %>
              </span>
              <%= if @total_gas_usage > 0 do %>
                <span
                  data-toggle="tooltip"
                  data-placement="top"
                  data-html="true"
                  data-template="<div class='tooltip tooltip-inversed-color tooltip-gas-usage' role='tooltip'><div class='arrow'></div><div class='tooltip-inner'></div></div>"
                  title="<div class='custom-tooltip-header'>Total gas used</div><div class='custom-tooltip-description'><b><%= BlockScoutWeb.Cldr.Number.to_string!(@total_gas_usage, format: "#,###") %><b></div>"
                  class="custom-tooltip-total-transactions">
                  <i style="color: #ffffff;" class="fa fa-info-circle ml-2"></i>
                </span>
              <% end %>
            </div>
          </div>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-3">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Total blocks" %>
            </span>
            <span class="dashboard-banner-network-stats-value" data-selector="block-count">
              <%= BlockScoutWeb.Cldr.Number.to_string!(@block_count, format: "#,###") %>
            </span>
          </div>
          <div class="dashboard-banner-network-stats-item dashboard-banner-network-stats-item-4">
            <span class="dashboard-banner-network-stats-label">
              <%= gettext "Wallet addresses" %>
            </span>
            <span class="dashboard-banner-network-stats-value" data-selector="address-count">
              <%= BlockScoutWeb.Cldr.Number.to_string!(@address_count, format: "#,###") %>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<section class="container">
  <div class="card card-chain-blocks js-ad-dependant-mb-3">
    <div class="card-body">
      <%= link(gettext("View All Blocks"), to: blocks_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
      <h2 class="card-title"><%= gettext "Blocks" %></h2>
      <div class="row" data-selector="chain-block-list" data-url="<%= chain_blocks_path(@conn, :chain_blocks) %>">
        <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
          <span class="alert-link">
            <%= gettext "Something went wrong, click to reload." %>
          </span>
        </button>
        <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
           <div class="tile tile-type-block n-p d-flex flex-column">
             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
             <div class="tile-bottom-contents">
               <div class="dark-block-loader"></div>
               <div class="dark-block-loader"></div>
             </div>
           </div>
         </div>
        </div>
        <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
           <div class="tile tile-type-block n-p d-flex flex-column">
             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
             <div class="tile-bottom-contents">
               <div class="dark-block-loader"></div>
               <div class="dark-block-loader"></div>
             </div>
           </div>
         </div>
        </div>
        <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
           <div class="tile tile-type-block n-p d-flex flex-column">
             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
             <div class="tile-bottom-contents">
               <div class="dark-block-loader"></div>
               <div class="dark-block-loader"></div>
             </div>
           </div>
         </div>
        </div>
        <div hidden data-selector="loading-message" class="col-lg-3" >
         <div data-selector="chain-block">
           <div class="tile tile-type-block n-p d-flex flex-column">
             <a class="tile-title"><span class="tile-loader tile-label-loader"></span> </a>
             <div class="tile-bottom-contents">
              <div class="dark-block-loader"></div>
              <div class="dark-block-loader"></div>
            </div>
           </div>
         </div>
        </div>
      </div>
    </div>
  </div>

  <%= render BlockScoutWeb.Advertisement.BannersAdView, "_banner_728.html", conn: @conn %>

  <div class="card card-chain-transactions">
    <div class="card-body">
      <%= link(gettext("View All Transactions"), to: transaction_path(BlockScoutWeb.Endpoint, :index), class: "btn-line float-right") %>
      <h2 class="card-title lg-card-title"><%= gettext "Transactions" %></h2>
      <div data-selector="channel-batching-message" style="display: none;">
        <div data-selector="reload-transactions-button" class="alert alert-info">
          <a href="#" class="alert-link"><span data-selector="channel-batching-count"></span> <%= gettext "More transactions have come in" %></a>
        </div>
      </div>
      <span data-selector="transactions-list" data-transactions-path="<%= @transactions_path %>">
        <button data-selector="error-message" class="alert alert-danger col-12 text-left" style="display: none;">
          <span class="alert-link">
            <%= gettext "Something went wrong, click to retry." %>
          </span>
        </button>
        <div hidden data-selector="loading-message">
          <%= render BlockScoutWeb.CommonComponentsView, "_tile-loader.html" %>
        </div>
      </span>
    </div>
  </div>
</section>
